import React, { useState, useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import { Button, Table, Popconfirm, message, Tooltip } from 'antd';
import UserRecordModal from './Components/UserRecordModal'
import UserListSearchForm from './Components/UserListSearchForm'
import api from '../../api/activityManage'
import utils from '../../utils/commonFuc'

const UserList = (props) => {
    
    const [state, setState] = useState({
        searchData: {
            page: 1,
            rows: 10
        },
        userList:[],//列表数据
        userListTotal:0,//列表总数
        showModal:{//编辑数据
            visible: false,
            type:1,//1-积分；2-奖品
            data:{}
        },        
    });

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
    }
    useEffect(()=>{
        let actId = utils.getQueryString(props.location.search,'actId')//活动ID
        let chanId = utils.getQueryString(props.location.search,'chanId')//渠道ID
        if(actId){
            state.searchData.actId = actId
        }else if(chanId){
            state.searchData.chanId = chanId
        }
        getList({})
    },[])
    const columns = [
        { title: '用户名称', dataIndex: 'name', key: 'name', width: 80, },
        { title: '手机号码', dataIndex: 'phone', key: 'phone', },
        { title: '用户类型', dataIndex: 'userType', key: 'userType', render: (text, record) => (
            <span>{record.userType==1?'老用户':'新用户'}</span>
            ),
        },
        { title: '所属上级', dataIndex: 'introPhone', key: 'introPhone', },
        { title: '已领取课程', dataIndex: 'className', key: 'className', },
        { title: '归属项目类型', dataIndex: 'projectTypeName', key: 'projectTypeName', },
        { title: '名片归属', dataIndex: 'userName', key: 'userName', },
        { title: '当前积分', dataIndex: 'curpoint', key: 'curpoint', },
        { title: '已获得积分', dataIndex: 'addpoint', key: 'addpoint', },
        { title: '拉新用户数', dataIndex: 'userCount1', key: 'userCount1', },
        { title: '已兑换奖品', dataIndex: 'goodsName', key: 'goodsName', },
        {
            title: '操作', dataIndex: 'lll', key: 'lll', render: (text, record) => (
                <div>
                    <Button type="link" onClick={()=>{setShowModal(1,true,record)}}>积分获得记录</Button>
                    <Button type="link" onClick={()=>{setShowModal(2,true,record)}}>奖品兑换记录</Button>
                </div>
            ),
        },
    ];
    const pageObj = {// 表格分页对象
        size: "small",
        total: state.userListTotal,
        pageSize: state.searchData.rows,
        current:state.searchData.page,
        showSizeChanger: true,
        showTotal: () => `共 ${state.userListTotal} 条`,
        onChange: (page) => {
            getList({page:page})
        },
        onShowSizeChange: (page, rows) => {
            getList({page:1,rows:rows})
        }
    }
    // 获取列表
    const getList = (data)=>{
        let obj = {
            actId:state.searchData.actId,
            chanId:state.searchData.chanId,
        }
        obj = Object.assign({},state.searchData,obj,data)
        if(!data.page){
            obj.page = 1
        }
        // obj = Object.assign({},obj,data?data:{})
        api.getActivitiesUserList(obj,(res)=>{
            console.log(res)
            updateState({
                searchData:obj,
                userList:res.recordList,
                userListTotal:res.totalCount
            })
        })
    }
    //添加和编辑
    const setShowModal = (type,show,data)=>{
        updateState({
            showModal:{
                visible:show,
                type:type,
                data:data
            }
        })
    }
    // 返回
    const goBack = ()=>{
        props.history.goBack()
    }
    return (
        <div>
            <div style={{ marginBottom: 30, paddingTop: 20 }}>
                <UserListSearchForm actId={state.searchData.actId} getList={getList} goBack={goBack}></UserListSearchForm>
            </div>
            <Table
                pagination={pageObj}
                columns={columns}
                dataSource={state.userList}
                pagination={pageObj}
                rowKey="id"
            />
            {/* 编辑活动模态框 */}
            <UserRecordModal showModal={state.showModal} setShowModal={setShowModal}></UserRecordModal>
        </div>
    )
}

export default withRouter(UserList)